<template>
  <el-row class="tac">
    <el-col :span="24" class="project_block">
      <div class="project_img"></div>
    </el-col>
    <el-col :span="24">
      <el-menu :default-active="active" class="el-menu-vertical-demo" @select="menuSelect" text-color="#565656" active-text-color="#fff">
        <el-menu-item index="5" @click="raceList">
          <img src="@/assets/images/menu_race.png" class="menu_pic menu_icon_5">
          <span slot="title">{{ $t('menu.RACE') }}</span>
        </el-menu-item>
        <el-menu-item index="7" @click="raceresultList">
          <img src="@/assets/images/menu_race.png" class="menu_pic menu_icon_5">
          <span slot="title">{{ $t('menu.RACERESULT') }}</span>
        </el-menu-item>
        <el-menu-item index="4" @click="webList">
          <img src="@/assets/images/menu_web.png" class="menu_pic menu_icon_4">
          <span slot="title">{{ $t('menu.WEB') }}</span>
        </el-menu-item>
        <el-menu-item index="2" @click="provinceList">
          <img src="@/assets/images/menu_prov.png" class="menu_pic menu_icon_2">
          <span slot="title">{{ $t('menu.PROV') }}</span>
        </el-menu-item>
        <el-menu-item index="3" @click="sponsorList">
          <img src="@/assets/images/menu_sponsor.png" class="menu_pic menu_icon_3">
          <span slot="title">{{ $t('menu.SPONSOR') }}</span>
        </el-menu-item>
        <el-menu-item v-if="userStat === 1" index="1" @click="userList">
          <img src="@/assets/images/menu_user.png" class="menu_pic menu_icon_1">
          <span slot="title">{{ $t('menu.USER') }}</span>
        </el-menu-item>
        <el-menu-item v-if="userStat === 1" index="6" @click="logList">
          <img src="@/assets/images/menu_log.png" class="menu_pic menu_icon_6">
          <span slot="title">{{ $t('menu.LOG') }}</span>
        </el-menu-item>
        <el-menu-item index="8" @click="spiderlogList">
          <img src="@/assets/images/menu_log.png" class="menu_pic menu_icon_6">
          <span slot="title">{{ $t('menu.SPIDER') }}</span>
        </el-menu-item>
        <el-menu-item index="12" @click="spiderlogErrList">
          <img src="@/assets/images/menu_log.png" class="menu_pic menu_icon_6">
          <span slot="title">抓取异常</span>
        </el-menu-item>
        <el-menu-item index="9" @click="announceList">
          <i class="el-icon-tickets icon menu_icon_8"></i>
          <span slot="title">{{ $t('menu.ANNOUNCE') }}</span>
        </el-menu-item>
        <el-menu-item index="10" @click="receiptList">
          <i class="el-icon-tickets icon menu_icon_8"></i>
          <span slot="title">{{ $t('menu.RECEIPT') }}</span>
        </el-menu-item>
        <el-menu-item index="11" @click="systemConfig">
          <i class="el-icon-setting icon menu_icon_8"></i>
          <span slot="title">{{ $t('menu.SETTING') }}</span>
        </el-menu-item>
        <el-menu-item index="13" @click="matchList">
          <i class="el-icon-setting icon menu_icon_8"></i>
          <span slot="title">指定赛</span>
        </el-menu-item>
        <el-menu-item index="14" @click="raceLHList">
          <i class="el-icon-setting icon menu_icon_8"></i>
          <span slot="title">联合赛</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import scale from "@/assets/images/scale.png";
import setting from "@//assets/images/setting.png";
import { mapGetters } from "vuex";

export default {
  name: "meunList",
  data() {
    return {
      isCollapse: true,
      scale: scale,
      setting: setting,
    };
  },
  watch: {},
  mounted: function () {},
  computed: {
    ...mapGetters(["userid", "userStat", "active"]),
  },
  methods: {
    menuSelect(key, keyPath) {
      // commit('SET_ACTIVE', key)
      // this.active = key
      // localStorage.setItem('active', key)
    },
    userList() {
      this.$router.push("/user-manage");
    },
    provinceList() {
      this.$router.push("/province-manage");
    },
    sponsorList() {
      this.$router.push("/sponsor-manage");
    },
    webList() {
      this.$router.push("/web-manage");
    },
    raceList() {
      this.$router.push("/race-manage");
    },
    raceresultList() {
      this.$router.push("/raceresult-manage");
    },
    logList() {
      this.$router.push("/log-manage");
    },
    spiderlogList() {
      this.$router.push("/spiderlog-manage");
    },
    spiderlogErrList() {
      this.$router.push("/spiderlogerr-manage");
    },
    announceList() {
      this.$router.push("/announce-list");
    },
    receiptList() {
      this.$router.push("/receipt-list");
    },
    systemConfig() {
      this.$router.push("/system-config");
    },
    matchList() {
      this.$router.push("/match-list");
    },
    raceLHList() {
      this.$router.push("/racelh-manage");
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu-vertical-demo{
  min-height: calc(100vh - 210px);
}
.el-menu-item {
  text-align: left;
  padding: 0 0 0 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 16px !important;
  color: #565656 !important;
  margin-top: 5px;
}

.el-menu-item a {
  color: #565656 !important;
}

.el-menu-item.is-active {
  background-color: #5399e1 !important;
  color: #fff !important;
}

.el-menu-item.is-active a {
  color: #fff !important;
}

.line {
  width: 90%;
  height: 1px;
  background: #ddd;
  margin: 10px 0 10px 10%;
}

.project_block {
  position: relative;
}

.project_img {
  width: 100px;
  height: 100px;
  background: #91bce9;
  display: block;
  margin: 20px auto;
}

.menu_icon_1 {
  width: 18px;
  height: 17px;
  margin: 0 19px 0 20px;
}

.menu_icon_2 {
  width: 19px;
  height: 17px;
  margin: 0 19px;
}

.menu_icon_3 {
  width: 26px;
  height: 26px;
  margin: 0 15px 0 16px;
}

.menu_icon_4 {
  width: 21px;
  height: 21px;
  margin: 0 18px;
}

.menu_icon_5 {
  width: 18px;
  height: 16px;
  margin: 0 20px 0 19px;
}

.menu_icon_6 {
  width: 20px;
  height: 20px;
  margin: 0 20px 0 17px;
}

.menu_icon_7 {
  width: 22px;
  height: 22px;
  margin: 0 19px 0 16px;
}

.menu_icon_8{
  color: #4f8cee;
  width: 20px;
  height: 20px;
  margin: 0 20px 0 17px;
}

.scale {
  width: 12px;
  height: 10px;
  position: absolute;
  top: 20px;
  right: 10px;
  cursor: pointer;
}

.setting {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 20px;
  right: 8px;
  cursor: pointer;
}

.textpos {
  position: relative;
  top: -8px;
}
</style>
<style>
.el-submenu__title {
  padding: 0 0 0 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 16px !important;
  color: #565656 !important;
  margin-top: 5px;
  text-align: left !important;
}
</style>
